import React, { Component } from 'react';
import {BrowserRouter as Router, Route , Link } from 'react-router-dom';
import { Layout, Menu, Icon } from 'antd';

import Merchant from './containers/merchant/Merchant';
import Platform from './containers/platform/Platform';
import AccountAuthority from './containers/accountAuthority/Account_Authority';
import RoleMag from './containers/roleMag/Role_Mag';
import AccountRole from './containers/accountRole/Account_Role';
import ClassificationMag from './containers/classificationMag/Classification_Mag'
import UserMag from './containers/userMag/User_Mag';
import OrderMag from './containers/orderMag/Order_Mag';
import FeedbackMag from './containers/feedbackMag/Feedback_Mag';
import EvaluationMag from './containers/evaluationMag/Evaluation_Mag';

import './App.css';
import 'antd/lib/layout/style/css';
import 'antd/lib/menu/style/css';
import 'antd/lib/icon/style/css';

const { Header, Sider, Content } = Layout;
const SubMenu = Menu.SubMenu;

export default class App extends Component {
  state = {
    collapsed: false,
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
  render() {
    return (
      <Router>
      <Layout>
        <Sider
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="logo" />
          <Menu theme="dark" mode="inline">
            <SubMenu key="sub1" title={<span><Icon type="user-add" /><span>商户管理</span></span>}>
              <Menu.Item key="1-1"><Link to={"/Merchant"}>商品入驻审核</Link></Menu.Item>
              <Menu.Item key="1-2"><Link to={'/Platform'}>行业管理</Link></Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" title={<span><Icon type="desktop" /><span>平台账号管理</span></span>}>
              <Menu.Item key="2-1"><Link to={'/AccountAuthority'}>权限管理</Link></Menu.Item>
              <Menu.Item key='2-3'><Link to={'./RoleMag'}>角色管理</Link></Menu.Item>
              <Menu.Item key="2-2"><Link to={'/AccountRole'}>账号管理</Link></Menu.Item>
            </SubMenu>
            <SubMenu key="sub3" title={<span><Icon type="shop" /><span>商品库管理</span></span>}>
              <Menu.Item key="3-1"><Link to={'/ClassificationMag'}>分类管理</Link></Menu.Item>
            </SubMenu>
            <Menu.Item key="sub4">
              <Icon type="user"/>
              <span>用户管理</span>
              <Link to={'./UserMag'}></Link>
            </Menu.Item>
            <Menu.Item key="sub5">
              <Icon type="shopping-cart"/>
              <span>订单管理</span>
              <Link to={'/OrderMag'}></Link>
            </Menu.Item>
            <Menu.Item key="sub6">
              <Icon type="profile"/>
              <span>意见反馈管理</span>
              <Link to={'/FeedbackMag'}></Link>
            </Menu.Item>
            <Menu.Item key="sub7">
              <Icon type="form"/>
              <span>评价管理</span>
              <Link to={'/EvaluationMag'}></Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
              style={{marginLeft:'16px',fontSize:'25px'}}
            />
          </Header>
          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 600 }}>
          <div>
             <Route path="/merchant" component={ Merchant }/>
             <Route path='/platform' component={ Platform }/>
             <Route path='/accountAuthority' component={ AccountAuthority }/>
             <Route path='/roleMag' component={ RoleMag }/>
             <Route path='/accountRole' component={ AccountRole }/>
             <Route path='/classificationMag' component={ ClassificationMag }/>
             <Route path='/userMag' component={ UserMag }/>
             <Route path='/orderMag' component={ OrderMag }/>
             <Route path='/feedbackMag' component={ FeedbackMag }/>
             <Route path='/evaluationMag' component={ EvaluationMag }/>
          </div>
          </Content>
        </Layout>
      </Layout>
      </Router>
    );
  }
}

